<div class="layout">
  <nz-spin [nzSpinning]="isSpinning">
    <form *ngIf="status === 'login'" nz-form class="login-form" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <h1>Justdodo</h1>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-user">
            <input formControlName="username" nz-input placeholder="用户名">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">请输入用户名!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-lock">
            <input formControlName="password" nz-input type="password" placeholder="密码">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button class="login-form-button" nzSize="large" nz-button nzType="primary" [disabled]="!validateForm.valid">登陆</button>
        </nz-form-control>
      </nz-form-item>
      <div class="tool-box">
        此平台已开放注册，<a class="register" (click)="changeState('register')">注册</a>
      </div>
      <!-- <p class="tips">账号: root 密码: root123</p> -->
    </form>

    <form *ngIf="status !== 'login'" nz-form class="login-form" [formGroup]="registerForm" (ngSubmit)="register()">
      <h1>Justdodo</h1>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-user">
            <input formControlName="username" nz-input placeholder="用户名">
          </nz-input-group>
          <nz-form-explain *ngIf="registerForm.get('username').dirty && registerForm.get('username').errors">请输入用户名!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-lock">
            <input formControlName="password" nz-input type="password" placeholder="密码">
          </nz-input-group>
          <nz-form-explain *ngIf="registerForm.get('password').dirty && registerForm.get('password').errors">请输入密码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-user">
            <input formControlName="nickName" nz-input placeholder="昵称">
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzPrefixIcon="anticon anticon-mail">
            <input formControlName="email" nz-input placeholder="email">
          </nz-input-group>
          <nz-form-explain *ngIf="registerForm.get('email').dirty && registerForm.get('email').errors">emial格式有误!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group class="verify-item" nzPrefixIcon="anticon anticon-safety-certificate">
            <input formControlName="verifyCode" nz-input placeholder="验证码">
            <a class="verify-btn" nz-button (click)="getVerifyCode()" *ngIf="this.time === 0">验证码</a>
            <a class="verify-btn" nz-button (click)="getVerifyCode()" *ngIf="this.time !== 0">{{this.time}}秒</a>
          </nz-input-group>
          <nz-form-explain *ngIf="registerForm.get('verifyCode').dirty && registerForm.get('verifyCode').errors">请输入验证码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button class="register-form-button" nzSize="large" nz-button nzType="primary" [disabled]="!registerForm.valid">注册</button>
        </nz-form-control>
      </nz-form-item>
      <div class="tool-box">
        <a class="register" (click)="changeState('login')">登陆页</a>
      </div>
    </form>
  </nz-spin>
</div>